<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.themeColor1 }">
		<u-form :model="form" ref="uForm" label-width='120rpx'>
			<u-form-item label="姓名" v-if="judegName">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="手机号" v-if="judegPhone">
				<u-input v-model="form.mobile"  />
			</u-form-item>
			<u-form-item label="地址" v-if="judegAddress">
				<u-input v-model="form.address" type='textarea ' />
			</u-form-item>
			<u-form-item label="备注">
				<u-input v-model="form.remark" type='textarea ' />
			</u-form-item>
		</u-form>
		<view class="btn">
			<view class="btn-item btn-item-close" @click="onClose">取消</view>
			<view class="btn-item" @click="onSubmit">确定</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					address: '',
					remark: '',
					pk_id: '',
				},
				judegAddress: true,
				judegName: true,
				judegPhone: true,
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}],
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
				}
			}
		},



		onLoad(options) {
			if (options.judegAddress) this.judegAddress = false
			if (options.judegName) this.judegName = false
			if (options.judegPhone) this.judegPhone = false
			this.$resPost('GetOrderDetailedInfo', {
				pk_id: options.pk_id
			}).then(res => {
				for (let i in this.react()) {
				
					this.$set(this.form, i, res.data[i]===null || res.data[i]===undefined ? '' : res.data[i])
				}
			})

		},
		methods: {

			react() {
				return {
					name: '',
					mobile: '',
					address: '',
					remark: '',
					pk_id: '',
				}
			},

			onClose() {
				uni.navigateBack({
					delta: 1,
				})
			},

			onSubmit() {
				let {
					judegAddress,
					judegName,
					judegPhone
				} = this
				
			

				if (judegName && !this.form.name.trim()) {
					this.$toast('请输入姓名')
					return
				}

				if (judegAddress && !this.form.address.trim()) {
					this.$toast('请输入地址')
					return
				}

				if ( judegPhone && !this.$u.test.mobile(this.form.mobile)) {
					this.$toast('请正确输入手机号')
					return
				}

				if (!judegAddress) delete this.form.address
				if (!judegName) delete this.form.name
				this.$resPost('UpdateOrderInfo', this.form).then(res => {
					this.$toast('修改成功')
					setTimeout(() => {
						this.onClose()
					}, 1000)
				}).catch(() => {
					this.$toast('修改失败')
					setTimeout(() => {
						this.onClose()
					}, 1000)
				})
			},

		}
	};
</script>

<style lang="scss" scoped>
	.index-box {
		padding: 26rpx;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.btn-item {
		width: 48%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #00A6F8;
		color: #ffffff;
		border-radius: 11rpx;
	}

	.btn-item-close {
		color: #999999;
		border: 1rpx solid #ccc;
		background-color: #ffffff;
	}
</style>
